<template>
    <div class="search-page">
        <div class="nav-sticky">
            <pswiper wrapclass="nav-cates" :betn="20" :slides="10" prevclass="cate-page-prev" id="cateSwp" ref="cateSwp"
                nextclass="cate-page-next">
                <li class="swiper-slide" :class="{ 'active-color': cate.selected }" v-for="(cate, idx) in topCates"
                    :key="idx" @click="parentIdx = 2; chooseCate(cate)" v-if="cate.title != '全部'"><a>{{ cate.title }}</a></li>
            </pswiper>
            <div class="gp-filter">
                <div class="gp-img-layout">
                    <div class="search-by-type">
                        <a :class="{ 'active': params.type === '' }" @click="chooseByType('')">综合</a>
                        <a :class="{ 'active': params.type === 'linggan' }" @click="chooseByType('linggan')">游戏</a>
                        <a :class="{ 'active': params.type === 'images' }" @click="chooseByType('images')">截图</a>
                        <a :class="{ 'active': params.type === 'discover' }" @click="chooseByType('discover')">作品</a>
                        <a :class="{ 'active': params.type === 'article' }" @click="chooseByType('article')">文章</a>
                        <a :class="{ 'active': params.type === 'explorer' }" @click="chooseByType('explorer')">收藏夹</a>
                        <!-- <a :class="{ 'active': params.type === 'sortVideo' }" @click="chooseByType('sortVideo')">短视频</a> -->
                    </div>
                    <div class="gp-img-layout-r">
                        <div class="seach-bx" v-if="params.type" :class="{ 'active': searchIsFocus }">
                        <div class="q-f-item-wrap">
                            <template v-for="c in cateObj" v-if="params.type == 'linggan' || params.type == 'images'">
                                <div class="q-f-item" v-for="s in c.items" v-if="s.selected"><span
                                        class="ct">{{ c.name }}</span><span class="ct-val">{{ s.title }}</span><i
                                        class="it-clr" @click="onParamterClear(s)"></i>
                                </div>
                            </template>
                            <input type="text" @focus="searchIsFocus = true" @blur="searchIsFocus = false"
                                v-model="params.keyword" @keypress.enter="onEnter"
                                :placeholder="'按标题/风格/类型等搜索 '+searchTotal+' 个' + searchTypeTextEnum[params.type]" />
                            <a class="cancel-search" v-if="params.keyword" @click="handleXClear"></a>
                        </div>
                        </div>
                        <div class="mk-cus-ddl">
                            <div class="sub-dd-block">
                                <ul class="sub-ddls">
                                    <li><a>全部</a></li>
                                    <li><a>游戏</a></li>
                                    <li><a>作品</a></li>
                                    <li><a>截图</a></li>
                                    <li><a>短视频</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="label-filter" style="margin-left:20px;" v-if="params.type == 'images'">
                            <span class="tit">版式</span>
                            <div class="plat-items">
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                        <i class="sm-tip" slot-content>横屏</i>
                            <span slot="reference" class="pitem h-screen" :class="{active:ori=='横屏'}" @click="chooseOri('横屏')"></span>
                            </el-popover>
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                        <i class="sm-tip" slot-content>竖屏</i>
                                <span slot="reference" class="pitem s-screen" :class="{active:ori=='竖屏'}" @click="chooseOri('竖屏')"></span>
                            </el-popover>
                            </div>
                        </div>
                        <div class="bs-g-flabel gpic-clr" v-show="params.type == 'images'">
                            <div class="cur">
                                <input type="text" id="colorfilter" style="display: none;">
                                <span v-if="params.imageColor" :style="{ backgroundColor: params.imageColor }"
                                    class="query-color"></span>颜色 <i v-if="params.imageColor"
                                    @click="handleClear('imageColor')" class="clear-by-search"></i>
                            </div>
                            <div class="games-filter img-rto-w" v-if="params.imageColor">
                                <div class="games-filter-wrap color-wrap">
                                    <div class="rtzd">
                                        准确度：
                                        <div class="rtzd-box">
                                            <el-slider :min="0" tooltip-class="no-tip" v-model="params.colorrto"
                                                @change="onColorRtoChange" :max="80"></el-slider><span class="rto-val">{{
                                                params.colorrto}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bs-g-flabel" v-if="params.type">
                            <span class="cur">筛选</span>
                            <div class="games-filter img-rto-w">
                                <div class="games-filter-wrap mul-wrap">
                                    <template v-if="params.type != 'explorer'">
                                        <div class="filter-g-tab">
                                            <span>推荐依据</span>
                                        </div>
                                        <div class="gft-data-box">
                                            <ul class="data-ul">
                                                <li><a :class="{active:params.rank=='首页推荐'}" @click="params.rank='首页推荐'">首页推荐</a></li>
                                                <li v-if="params.type == 'linggan'"><a :class="{active:params.rank==''}" @click="params.rank=''">全部游戏</a></li>
                                                <li v-if="params.type == 'images'"><a :class="{active:params.rank==''}" @click="params.rank=''">全部截图</a></li>
                                                <li v-if="params.type == 'discover'"><a :class="{active:params.rank==''}" @click="params.rank=''">全部作品</a></li>
                                                <li v-if="params.type == 'article'"><a :class="{active:params.rank==''}" @click="params.rank=''">全部文章</a></li>
                                            </ul>
                                        </div>
                                    </template>
                                    <div class="filter-g-tab">
                                        <span>排序依据</span>
                                    </div>
                                    <div class="gft-data-box">
                                        <ul class="data-ul">
                                            <li><a :class="{active:params.orderByColumn=='see'}" @click="params.orderByColumn='see'">最受欢迎</a></li>
                                            <li><a :class="{active:params.orderByColumn=='createTime'}" @click="params.orderByColumn='createTime'">最新添加</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="seach-bx mobile" v-if="params.type">
                    <div class="q-f-item-wrap">
                        <template v-for="c in cateObj">
                            <div class="q-f-item" v-for="s in c.items" v-if="s.selected"><span
                                    class="ct">{{ c.name }}</span><span class="ct-val">{{ s.title }}</span><i class="it-clr"
                                    @click="onParamterClear(s)"></i>
                            </div>
                        </template>
                        <input type="text" v-model="params.keyword" @keypress.enter="onEnter"
                            :placeholder="'按标题/风格/类型等搜索 1,789 款' + searchTypeTextEnum[params.type]" />
                        <a class="cancel-search" v-if="params.keyword" @click="handleXClear"></a>
                    </div>
                </div>
            </div>
        </div>

        <template v-if="!isShowAll">
            <div class="first-result-row" v-if="params.type === ''&&(firstCollect.id||firstGames.length > 0||firstWork.id||firstArticle.id)">
                <div class="result-item collect" v-if="firstCollect.id">
                    <div class="b-tit">收藏夹</div>
                    <div class="data-box-wrap">
                        <a class="data-box" target="_blank" :href="nextPageEnum[firstCollect.type] + '/' + firstCollect.id"
                            @click.prevent="toFoldInfo(firstCollect)">
                            <div class="t-imgs">
                                <div class="f-img">
                                    <img loading="lazy" v-if="firstCollect.collectList && firstCollect.collectList.length > 0" :srcset="firstCollect.collectList[0].srcsets" v-lazy="firstCollect.collectList[0].lazy" @error="loadError"/>
                                </div>
                                <div class="n-imgs">
                                    <span><img loading="lazy" v-if="firstCollect.collectList && firstCollect.collectList.length > 1" :srcset="firstCollect.collectList[1].srcsets" v-lazy="firstCollect.collectList[1].lazy" @error="loadError"></span>
                                    <span><img loading="lazy" v-if="firstCollect.collectList && firstCollect.collectList.length > 2" :srcset="firstCollect.collectList[2].srcsets" v-lazy="firstCollect.collectList[2].lazy" @error="loadError"></span>
                                    <span><img loading="lazy" v-if="firstCollect.collectList && firstCollect.collectList.length > 3" :srcset="firstCollect.collectList[3].srcsets" v-lazy="firstCollect.collectList[3].lazy" @error="loadError"></span>
                                </div>
                            </div>
                            <div class="title-row">
                                <div class="title" :title="firstCollect.title" v-html="firstCollect.vtitle"></div>
                                <div class="num">{{ firstCollect.num }} 收藏</div>
                            </div>
                            <div class="ubot">
                                <a class="u-row" :href="'/user/' + firstCollect.userId">
                                    <span class="img-box">
                                        <img loading="lazy"
                                            v-aimgd="{ avatar: firstCollect.member.avatar, id: firstCollect.userId, w: 20, name: firstCollect.member.userName }">
                                    </span>
                                    <span class="name">{{ firstCollect.member.userName }}</span>
                                </a>
                                <div class="typename-box">
                                    <span class="type-name" :class="['ftp_' + firstCollect.type]">{{ folderTypeEnum[firstCollect.type] }}</span>
                                </div>
                            </div>
                        </a>
                        <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                            <i class="sm-tip" slot-content>查看更多</i>
                            <a slot="reference" class="guide-more" @click="showByType('explorer')"></a>
                        </el-popover>
                    </div>
                    <div class="first-guide" v-if="showGudie">
                        <a class="i-know-btn" @click="handleIknow">我知道了</a>
                    </div>
                </div>
                <div class="result-item game" v-if="firstGames.length > 0">
                    <div class="b-tit">游戏</div>
                    <div class="data-box-wrap">
                        <div class="mu-items-box">
                            <a class="bdl-data-item" v-for="(gm, idx) in firstGames" :key="idx" :href="'/game/' + gm.id" target="_blank">
                                <div class="t-imgs">
                                    <img loading="lazy" :srcset="gm.srcsets" v-lazy="gm.lazy" @error="loadError">
                                    <span class="pnum">{{ gm.totalImageCount }}</span>
                                </div>
                                <div class="left-icos">
                                    <!-- <img loading="lazy" src="../assets/pro/common/hot.png" alt="" v-if="gm.hot"> -->
                                    
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                        <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                                        <img loading="lazy" slot="reference" src="../assets/pro/common/hot.png" alt="" v-if="gm.hot">
                                    </el-popover>
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                        <i class="sm-tip" slot-content>内容含视频</i>
                                        <img loading="lazy" slot="reference" src="../assets/pro/common/video.png" alt=""
                                            v-if='gm.videoUrl'>
                                    </el-popover>
                                </div>
                                <div class="right-icos hid-el" v-if="gm.tagsList && gm.tagsList.length > 0">
                                    <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in gm.tagsList" :key="tdx"
                                        :title="t.title" v-if="t.image" :src="t.image" alt="" />
                                </div>
                                <div class="title-row">
                                    <div class="title" :title="gm.title" v-html="gm.vtitle"></div>
                                    <div class="num znum">{{ gm.praiseStr }}</div>
                                </div>
                                <a class="u-row">
                                    <span class="img-box">
                                        <img loading="lazy"
                                            v-aimgd="{ avatar: gm.member.avatar, id: gm.member.id, w: 20, name: gm.member.userName }">
                                    </span>
                                    <span class="name">{{ gm.member.userName }}</span>
                                </a>
                            </a>
                        </div>
                        <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                            <i class="sm-tip" slot-content>查看更多</i>
                            <a slot="reference" class="guide-more" @click="showByType('linggan')"></a>
                        </el-popover>
                    </div>
                </div>
                <div class="result-item game" v-if="firstWork.id">
                    <div class="b-tit">作品</div>
                    <div class="data-box-wrap">
                        <div class="mu-items-box">
                            <a class="bdl-data-item" :href="'/work/' + firstWork.id"  target="_blank">
                                <div class="t-imgs">
                                    <img loading="lazy" :srcset="firstWork.srcsets" v-lazy="firstWork.lazy" @error="loadError"
                                        v-if="firstWork.id">
                                </div>
                                <div class="left-icos" v-if="firstWork.id">
                                    <!-- <img loading="lazy" src="../assets/pro/common/hot.png" alt="" v-if="firstWork.hot"> -->
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                        <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                                        <img loading="lazy" slot="reference" src="../assets/pro/common/hot.png" alt="" v-if="firstWork.hot">
                                    </el-popover>
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                        <i class="sm-tip" slot-content>内容含视频</i>
                                        <img loading="lazy" slot="reference" src="../assets/pro/common/video.png" alt=""
                                            v-if='firstWork.videoUrl'>
                                    </el-popover>
                                </div>
                                <div class="right-icos hid-el"
                                    v-if="firstWork.tagsList && firstWork.tagsList.length > 0">
                                    <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in firstWork.tagsList" :key="tdx"
                                        :title="t.title" v-if="t.image" :src="t.image" alt="" />
                                    <!-- <img loading="lazy" src="../assets/pro/common/rz2.png" alt=""> -->
                                </div>
                                <div class="title-row">
                                    <template v-if="firstWork.id">
                                        <div class="title" :title="firstWork.title" v-html="firstWork.vtitle">
                                        </div>
                                        <div class="num znum">{{ firstWork.praiseStr }}</div>
                                    </template>
                                </div>
                                <div class="u-row">
                                    <template v-if="firstWork.id">
                                        <span class="img-box">
                                            <img loading="lazy"
                                                v-aimgd="{ avatar: firstWork.member.avatar, id: firstWork.member.id, w: 20, name: firstWork.member.userName }">
                                        </span>
                                        <span class="name">{{ firstWork.member.userName }}</span>
                                    </template>
                                </div>
                            </a>
                        </div>
                        <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                            <i class="sm-tip" slot-content>查看更多</i>
                            <a slot="reference" class="guide-more" @click="showByType('work')"></a>
                        </el-popover>
                    </div>
                </div>
                <div class="result-item game" v-if="firstArticle.id">
                    <div class="b-tit">文章</div>
                    <div class="data-box-wrap">
                        <div class="mu-items-box">
                            <a class="bdl-data-item" :href="'/article/' + firstArticle.id"  target="_blank">
                                <div class="t-imgs">
                                    <img loading="lazy"  :srcset="firstArticle.srcsets" v-lazy="firstArticle.lazy" @error="loadError" v-if="firstArticle.id">
                                </div>
                                <div class="left-icos" v-if="firstArticle.id">
                                    <!-- <img loading="lazy" src="../assets/pro/common/hot.png" alt="" v-if="firstArticle.hot"> -->
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                        <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                                        <img loading="lazy" slot="reference" src="../assets/pro/common/hot.png" alt="" v-if="firstArticle.hot">
                                    </el-popover>
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                        <i class="sm-tip" slot-content>内容含视频</i>
                                        <img loading="lazy" slot="reference" src="../assets/pro/common/video.png" alt=""
                                            v-if='firstArticle.videoUrl'>
                                    </el-popover>
                                </div>
                                <div class="right-icos hid-el"
                                    v-if="firstArticle.tagsList && firstArticle.tagsList.length > 0">
                                    <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in firstArticle.tagsList" :key="tdx"
                                        :title="t.title" v-if="t.image" :src="t.image" alt="" />
                                </div>
                                <div class="title-row">
                                    <template v-if="firstArticle.id">
                                        <div class="title" :title="firstArticle.title" v-html="firstArticle.title">
                                        </div>
                                        <div class="num znum">{{ firstArticle.praiseStr }}</div>
                                    </template>
                                </div>
                                <div class="u-row">
                                    <template v-if="firstArticle.id">
                                        <span class="img-box">
                                            <img loading="lazy"
                                                v-aimgd="{ avatar: firstArticle.member.avatar, id: firstArticle.member.id, w: 20, name: firstArticle.member.userName }">
                                        </span>
                                        <span class="name">{{ firstArticle.member.userName }}</span>
                                    </template>
                                </div>
                            </a>
                        </div>
                        <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                            <i class="sm-tip" slot-content>查看更多</i>
                            <a slot="reference" class="guide-more" @click="showByType('article')"></a>
                        </el-popover>
                    </div>
                </div>
                <!-- <div class="result-item video">
                    <div class="b-tit">短视频</div>
                    <div class="data-box-wrap">
                        <div class="mu-items-box">
                            <a class="bdl-data-item">
                                <div class="t-imgs">
                                    <template v-if="firstVideo.id">
                                        <img loading="lazy" :src="firstVideo.image">
                                        <a class="play-icon" @click="currentPlayItem=firstVideo;showPlay=true;"></a>
                                    </template>
                                </div>
                                <div class="title-row">
                                    <template v-if="firstVideo.id">
                                        <div class="title" :title="firstVideo.title"
                                        v-html="replaceToHtml(firstVideo.title)"></div>
                                        <div class="num znum">{{ firstVideo.praiseCount }}</div>
                                    </template>
                                </div>
                                <div class="u-row">
                                    <template v-if="firstVideo.id">
                                        <span class="img-box">
                                        <img loading="lazy"
                                                v-aimgd="{ avatar: firstVideo.member.avatar, id: firstVideo.member.id, w: 20, name: firstVideo.member.userName }">
                                        </span>
                                        <span class="name">{{ firstVideo.member.userName }}</span>
                                    </template>
                                </div>
                            </a>
                        </div>
                        <a class="guide-more" @click="showByType('sortVideo')"></a>
                    </div>
                </div> -->
            </div>
        </template>

        <!-- 游戏 -->
        <div class="game-tab-page" v-if="params.type === 'linggan'">
            <div class="list-wrap fill">
                <div class="list-box">
                    <a class="bdl-data-item" :href="'/game/' + item.id" target="_blank"
                        v-for="(item, i) in list" :key="i">
                        <div class="t-imgs">
                            <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                            <span class="pnum">{{ item.totalImageCount }}</span>
                        </div>
                        <div class="left-icos">
                            <!-- <img loading="lazy" src="../assets/pro/common/hot.png" alt="" v-if="item.hot"> -->
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                                <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                                <img loading="lazy" slot="reference" src="../assets/pro/common/new.png" alt="">
                            </el-popover>
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                                <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                                <img loading="lazy" slot="reference" src="../assets/pro/common/hot.png" alt="">
                            </el-popover>
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.videoUrl'>
                                <i class="sm-tip" slot-content>内容含视频</i>
                                <img loading="lazy" slot="reference" src="../assets/pro/common/video.png" alt="">
                            </el-popover>
                        </div>
                        <div class="right-icos hid-el   " v-if="item.tagsList && item.tagsList.length > 0">
                            <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title"
                                v-if="t.image" :src="t.image" alt="" />
                        </div>
                        <div class="title-row">
                            <div class="title" :title="item.title" v-html="item.vtitle"></div>
                            <div class="rt">
                                <div class="num znum">{{ item.praiseStr }}</div>
                                <span class="vnum">{{ item.seeStr }}</span>
                            </div>
                        </div>
                        <a class="u-row" target="_blank" :href="'/user/' + item.userId">
                            <img loading="lazy"
                                v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />{{
                            item.member.userName }}<img loading="lazy" class="u-m-tag" v-for="tag in item.member.tagsList"
                                :src="tag.image" alt="">
                        </a>
                    </a>
                    <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>
                    <Empty text="没有找到符合条件的结果~" v-if="!isloading && list.length == 0" />
                </div>
                <!-- <div class="filter-by">
                    <template >
                        <div class="title">按游戏属性筛选</div>
                        <ul class="cates custom-scroll">
                            <li v-for="(cate, idx) in cateObj" :key="idx" v-if="cate.name!='功能'&&cate.name!='材质图案'">
                                <a class="cate-name" :class="{ 'collapse': cate.checked }" @click="handleOpen(cate,idx)">{{ cate.name }}</a>
                                <ul class="sub-cates" v-if="cate.checked">
                                    <li v-for="(sub, subidx) in cate.items" :class="{ 'active': sub.selected }"
                                        @click="parentIdx=idx;handleSelSub(sub)" v-if="sub.title != '全部'">
                                        <a class="text">{{ sub.title }}</a><i class="num">{{sub.articleNum }}</i>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </template>
                </div> -->
            </div>
        </div>

        <!-- 截图 -->
        <div class="img-datas" v-if="params.type == 'images' || (params.type == '' && list.length > 0)">
            <div class="b-tit gp-filter" v-if="params.type != 'images'">
                截图
                <div class="label-filter" style="margin-left:20px;">
                    <span class="tit">版式</span>
                    <div class="plat-items">
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                <i class="sm-tip" slot-content>横屏</i>
                    <span slot="reference" class="pitem h-screen" :class="{active:ori=='横屏'}" @click="chooseOri('横屏')"></span>
                    </el-popover>
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                <i class="sm-tip" slot-content>竖屏</i>
                        <span slot="reference" class="pitem s-screen" :class="{active:ori=='竖屏'}" @click="chooseOri('竖屏')"></span>
                    </el-popover>
                    </div>
                </div>
            </div>
            <div class="list-wrap fill">
                <div class="img-list">
                    <WaterfallFlowImgList id="1" :list="list" ref="refWaf" :columns="6" :defaultw="414" v-if="list.length > 0" />
                    <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>
                    <Empty text="没有找到符合条件的结果~" v-if="!isloading && list.length == 0" />
                </div>
                <!-- <div class="filter-by" v-if="params.type != ''">
                    <template>
                        <div class="title">按游戏属性筛选</div>
                        
                        <ul class="cates custom-scroll">
                            <li v-for="(cate, idx) in cateObj" :key="idx">
                                <a class="cate-name" :class="{ 'collapse': cate.checked }" @click="handleOpen(cate,idx)">{{ cate.name }}</a>
                                <ul class="sub-cates" v-if="cate.checked">
                                    <li v-for="(sub, subidx) in cate.items" :class="{ 'active': sub.selected }"
                                        @click="parentIdx=idx;handleSelSub(sub)" v-if="sub.title != '全部'">
                                    <a class="text">{{ sub.title }}</a><i class="num">{{sub.imageNum }}</i>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </template>
                </div> -->
            </div>
        </div>

        <!-- 作品 -->
        <div class="list-wrap fill wk-list-area no-flex" v-if="params.type === 'discover'">
            <div class="list-box" v-if="list.length > 0">
                <a class="bdl-data-item" :href="'/work/' + item.id" v-for="(item, i) in list" :key="i"  target="_blank">
                    <div class="img-flex-box">
                        <div class="main-img">
                            <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy"  @error="loadError"/>
                        </div>
                    </div>
                    <div class="bot-desc">
                        <span class="file-name" :title="item.title" v-html="item.vtitle"></span>
                    </div>
                    <div class="bot-author">
                        <a class="u" target="_blank" :href="'/user/' + item.userId">
                            <span class="img-box">
                                <img loading="lazy"
                                    v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                            </span>
                            <div class="name">
                                <span class="name-text">
                                    {{ item.member.userName }}
                                </span>
                                <img loading="lazy" class="u-m-tag" v-for="tag in item.member.tagsList" :src="tag.image" alt="">
                            </div>
                        </a>
                        <div class="rt">
                            <span class="like-num">{{item.praiseStr}}</span>
                            <span class="vnum">{{ item.seeStr }}</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>
            <Empty text="没有找到符合条件的结果~" v-if="!isloading && list.length == 0" />
        </div>

        <!-- 文章 -->
        <div class="list-wrap fill wk-list-area no-flex" v-if="params.type === 'article'">
            <div class="list-box" v-if="list.length > 0">
                <a class="bdl-data-item" :href="'/work/' + item.id"  target="_blank"
                    v-for="(item, i) in list" :key="i">
                    <div class="img-flex-box">
                        <div class="main-img">
                            <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                        </div>
                    </div>
                    <div class="bot-desc">
                        <span class="file-name" :title="item.title" v-html="item.vtitle"></span>
                    </div>
                    <div class="bot-author">
                        <a class="u" target="_blank" :href="'/user/' + item.userId">
                            <span class="img-box">
                                <img loading="lazy"
                                    v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                            </span>
                            <div class="name">
                                <span class="name-text">{{ item.member.userName }}</span>
                                <img loading="lazy" class="u-m-tag" v-for="tag in item.member.tagsList" :src="tag.image" alt="">
                            </div>
                        </a>
                        <div class="rt">
                            <div class="num znum">{{ item.praiseStr }}</div>
                            <span class="vnum">{{ item.seeStr }}</span>
                        </div>
                    </div>
                </a>
            </div>
            <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>
            <Empty text="没有找到符合条件的结果~" v-if="!isloading && list.length == 0" />
        </div>

        <!-- 收藏夹 -->
        <div class="jitu-wrap clt-fld-area" v-if="params.type === 'explorer'">
            <div class="data-box" v-for="(item, i) in list">
                <a class="t-imgs" :href="nextPageEnum[item.type] + '/' + item.id" :key="i"
                    @click.prevent="toFoldInfo(item)">
                    <div class="f-img">
                        <img loading="lazy" v-if="item.collectList && item.collectList.length > 0" :srcset="item.collectList[0].srcsets" v-lazy="item.collectList[0].lazy" @error="loadError"/>
                    </div>
                    <div class="n-imgs">
                        <span><img loading="lazy" v-if="item.collectList && item.collectList.length > 1" :srcset="item.collectList[1].srcsets" v-lazy="item.collectList[1].lazy" @error="loadError"/></span>
                        <span><img loading="lazy" v-if="item.collectList && item.collectList.length > 2" :srcset="item.collectList[2].srcsets" v-lazy="item.collectList[2].lazy" @error="loadError"/></span>
                    </div>
                </a>
                <div class="title-row">
                    <div class="title" :title="item.title" v-html="item.vtitle"></div>
                    <div class="num">{{ item.num }} 收藏</div>
                </div>
                <div class="typename-box">
                    <span class="type-name" :class="['ftp_' + item.type]">{{ folderTypeEnum[item.type] }}</span>
                </div>
                <a class="u-row" :href="'/user/' + item.userId" target="_blank"  v-if="item.member">
                    <img loading="lazy"
                        v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }">{{
                            item.member.userName
                        }}
                </a>
            </div>
            <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>
            <Empty text="没有找到符合条件的结果~" v-if="!isloading && list.length == 0" />
        </div>

        <!-- 短视频 -->
        <div class="video-wrap vd-list-area" v-if="params.type === 'sortVideo'">
            <div class="data-box" v-for="(item, i) in list" :key="i">
                <div class="main-box">
                    <img loading="lazy" :src="item.image" alt="">
                    <span class="play-icon" @click="currentPlayItem = item; showPlay = true;"></span>
                </div>
                <div class="con-mask hid-el"></div>
                <a class="title hid-el" v-html="item.vtitle" :title="item.title"></a>
            </div>
        </div>

        <div class="guide-mask" v-if="showGudie">

        </div>

        <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body :visible.sync="showGameInfo"
            direction="btt">
            <gameInfo @close="onInfoClose" :id="currentId" />
        </el-drawer>
        <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body :visible.sync="showWorkInfo"
            direction="btt">
            <WorkInfo @close="onInfoClose" :id="currentId" @prev="onPrev" @next="onNext" />
        </el-drawer>
        <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body :visible.sync="showArticleInfo"
            direction="btt">
            <!-- 文章详情 -->
            <articleInfo @close="onInfoClose" :id="currentId" />
        </el-drawer>


        <Empty text="没有找到符合条件的结果~" v-if="!isloading && !firstCollect.id && firstGames.length == 0 && !firstWork.id && !firstArticle.id && params.type == ''&&list.length==0" />

        <PlayVideo v-if="showPlay" :data="currentPlayItem" @close="showPlay = false" />

        <div class="pro-bot-loading" v-if="isloading">
            <i class="el-icon-loading"></i>
        </div>

        <UnLoginMask />
    </div>
</template>

<script>
import "../../static/utils/jquery.js";
require('../../static/utils/spectrum.js');
import UnLoginMask from '@/components/UnLoginMask'
import Empty from '@/components/Empty'
import PlayVideo from '@/components/playvideo'
import gameInfo from '@/components/gameInfo'
import articleInfo from '@/components/articleinfo'
import WorkInfo from '@/components/workinfo'
import pswiper from '@/components/pswiper'
import WaterfallFlowImgList from '@/components/WaterfallFlowImgList'
import api from '@/api/api'
export default {
    name: 'homes',
    data() {
        return {
            ori:'',
            isInitColorPicker:false,
            scrollPosition:0,
            searchTotal:0,
            searchIsFocus: false,
            collectOrderByColumns: [
                { title: '最新', value: 'createTime' },
                { title: '关注最多', value: 'fans' },
                { title: '收藏最多', value: 'num' },
                { title: '全部', value: '' }
            ],
            folderTypeEnum: {
                1: '图片集收藏夹',
                0: '单图收藏夹',
                2: '短视频收藏夹',
                3: '未知类型收藏夹'
            },
            isloading: true,
            currentIdx: 0,
            showWorkInfo: false,
            showArticleInfo: false,
            workRanks: [],
            topCateId: '',
            topCates: [],
            nextPageEnum: {
                '': '/',
                1: '/collection/games',
                0: '/collection/imgs',
                2: '/collection/videos'
            },
            currentPlayItem: {},
            showPlay: false,
            cateObj: [],
            parentIdx: -1,
            searchTypeEnum: {
                'linggan': 'linggan',
                'articleImage': 'images',
                'discover': 'discover',
                'article': 'article',
                'video': 'sortVideo',
                'explorer': 'explorer',
                '': ''
            },
            searchTypeTextEnum: {
                'linggan': '游戏',
                'images': '截图',
                'discover': '作品',
                'article': '文章',
                'video': '短视频',
                'explorer': '收藏夹',
                '': ''
            },
            homeTypeEnum: {
                'linggan': 'linggan',
                'images': 'articleImage',
                'discover': 'discover',
                'article': 'article',
                'sortVideo': 'video',
                'explorer': 'explorer',
                '': ''
            },
            infoType: '',
            curFullPath: '',
            showGameInfo: false,
            currentId: '',
            list: [],
            hasMore: true,
            scrollLoaded: false,
            total: 0,
            isShowAll: false,
            showGudie: false,
            isSubCate: false,
            defaultColors: ['#BFDA6D', '#F3DE64', '#F8A650', '#E96248', '#4D4D4D', '#9DC6C8', '#6998D0', '#7368EE', '#965C23', '#DAA36D', '#FFFFFF', '#C36DDA'],
            columns: '',
            slickSettings: {
                slidesToShow: 7,
                slidesToScroll: 1,
                infinite: false
            },
            imgDataList: [],
            params: {
                colorrto: 10,
                imageColor: '',
                rank: '',
                pageNum: 1,
                pageSize: 50,
                keyword: '',
                type: '',
                isAsc: 'desc',
                orderByColumn: 'createTime',
                showType: '人气最多'
            },
            firstCollect: { collectList: [], member: {}, type: 0 },
            collectIds: [],
            firstGames: [],
            firstWork: { member: {}, tagsList: [] },
            firstArticle: { member: {}, tagsList: [] },
            firstVideo: { member: {} },
            littleImgList: []
        }
    },
    components: {
        WaterfallFlowImgList, pswiper, gameInfo, PlayVideo, WorkInfo, articleInfo, Empty, UnLoginMask
    },
    destroyed() {
        window.removeEventListener('scroll', this.docScroll);
    },
    activated(){
        window.addEventListener('scroll', this.docScroll);
        let that=this;
        this.$nextTick(() => {
            window.scrollTo(0,that.scrollPosition)
        });
    },
    deactivated(){
        window.removeEventListener('scroll', this.docScroll);
    },
    methods: {
        chooseOri(_ori){
            this.ori=!!this.ori&&this.ori==_ori?'':_ori;
            this.params.orientation=this.ori;
            
            this.hasMore = true;
            this.scrollLoaded = false;
            this.params.pageNum = 1;
            this.params.last = '';
            this.list = [];

            if(this.params.type==''){
                $('body,html').animate({
                'scrollTop':$('.img-datas').offset().top-70
                },0);
            }else if(this.params.type=='images'){
                $('body,html').animate({
                'scrollTop':$('.img-datas').offset().top-70
                },0);
            }
            this.queryList(this.params);
        },
        handleOpen(cate,idx) {
            // if (this.parentIdx == idx) {
            //     this.parentIdx = -1;
            // } else {
            //     this.parentIdx = idx;
            // }
            this.parentIdx=idx;
            if(cate.checked==undefined){
                cate.checked=true;
            }else{
                cate.checked=!cate.checked;
            }
            this.$forceUpdate();
        },
        handleClear(_property){
            this.params[_property]='';
            this.handleSearch();
        },
        loadError(e){
            e.target.removeAttribute('srcset');
        },
        onColorRtoChange() {
            this.handleSearch();
        },
        onLoaded(e, item, w, isimg) {
            let domainUrl = this.$imgdomainurl;
            let el = e.target;
            let _vtime = null;
            if (item.updateTime) {
                _vtime = item.updateTime;
            } else if (item.createTime) {
                _vtime = item.createTime;
            } else if (item.create_time) {
                _vtime = item.create_time.replace('T', ' ');
            }
            _vtime = Math.abs(new Date(_vtime).getTime());
            let srcsets = [];

            if (isimg) {
                let _url = this.$imgdomainurl + (item.imageId ? item.imageId : (item.article ? 'article-' + item.article.id : '')) + '-' + _vtime;
                if (!item.imageId && !item.article)
                    _url = item.content;
                else {
                    srcsets.push(_url + '@1x' + w + '.webp 1x');
                    srcsets.push(_url + '@2x' + w + '.webp 2x');
                    srcsets.push(_url + '@3x' + w + '.webp 3x');

                    el.srcset = srcsets.join(',')
                }
            } else {
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@1x' + w + '.webp 1x');
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@2x' + w + '.webp 2x');
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@3x' + w + '.webp 3x');
                el.srcset = srcsets.join(',')
            }
        },
        getimgObj(item, w, isimg) {
            let _vtime = null;
            if (item.updateTime) {
                _vtime = item.updateTime;
            } else if (item.createTime) {
                _vtime = item.createTime;
            } else if (item.create_time) {
                _vtime = item.create_time.replace('T', ' ');
            }
            _vtime = Math.abs(new Date(_vtime).getTime());
            if (isimg) {
                if (!item) {
                    return {
                        src: require('@/assets/loading_error.png'),
                        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                    }
                } else {
                    let _url = this.$imgdomainurl + (item.imageId ? item.imageId : (item.article ? 'article-' + item.article.id : '')) + '-' + _vtime + '@1x' + w + '.webp';
                    if (!item.imageId && !item.article)
                        _url = item.content;
                    return {
                        src: _url,
                        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                    }
                }
            } else {
                return {
                    src: this.$imgdomainurl + 'article-' + item.id + '-' + _vtime + '@1x' + w + '.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
            }
        },
        onPrev() {
            if (this.currentIdx == 0) {
                this.$amessage.warn('没有更多了')
                return;
            }
            this.currentIdx--;
            this.currentId = this.list[this.currentIdx].id;
        },
        onNext() {
            if (this.currentIdx == this.list.length - 1) {
                this.$amessage.warn('没有更多了')
                return;
            }
            this.currentIdx++;
            this.currentId = this.list[this.currentIdx].id;
        },
        handleXClear() {
            this.cateObj.map(item => {
                item.items.map(sub => {
                    sub.selected = false;
                })
            })
            this.topCates.map(item=>{
                item.selected=false;
            })
            this.params.keyword = '';
            this.$router.replace({ path: '/searchs?t=' + (this.params.type=='images'?'articleImage':this.params.type) })
        },
        handleBy(item) {
            this.params.rank = item.value;
            this.handleSearch();
        },
        chooseCate(_cate) {
            // _cate.selected=_cate.selected==undefined?true:!_cate.selected;
            // this.topCateId=_cate.value;
            // this.$forceUpdate();

            // this.handleSelSub(_cate);
            
            // this.topCates.map(item=>{
            //     item.selected=false;
            // })
            // _cate.selected=true;
            // this.handleSearch();
            this.$router.replace({ path: '/searchs?k=' +_cate.title + '&t=' + (this.params.type=='images'?'articleImage':this.params.type) })
        },
        toFoldInfo(f) {
            localStorage.setItem('FOL-BACK-P', location.href.substring(location.href.lastIndexOf('/')));
            this.$router.push({ path: this.nextPageEnum[f.type] + '/' + f.id })
        },
        onEnter(e) {
            if (e) e.target.blur();
            this.chooseByType(this.params.type);
        },
        onParamterClear(sub) {
            this.handleSelSub(sub);
        },
        handleSelSub(sub) {
            let _parent = this.cateObj[this.parentIdx];
            if (_parent.queryfield == 'orientation' || _parent.queryfield == 'era' || _parent.queryfield == 'device' || _parent.queryfield == 'style') {
                if (!sub.selected) {
                    _parent.items.map((item) => {
                        if (item != sub) {
                            item.selected = false;
                        }
                    })
                }
            }
            sub.selected = sub.selected ? !sub.selected : true;
            this.$forceUpdate();

            let params = {}
            this.cateObj.map(item => {
                if (item.queryfield == 'orientation' || item.queryfield == 'era' || item.queryfield == 'device' || item.queryfield == 'style') {
                    params[item.queryfield] = '';
                    item.items.map(sub => {
                        if (sub.selected) {
                            params[item.queryfield] = sub.value;
                        }
                    })
                } else {
                    params[item.queryfield] = [];
                    item.items.map(sub => {
                        if (sub.selected) {
                            params[item.queryfield].push(sub.value);
                        }
                    })
                    params[item.queryfield] = params[item.queryfield].join(',');
                }
            })
            // if (_parent.name == '功能' || _parent.name == '材质图案') {
            //     this.params.type = 'images';
            // } else {
            //     this.params.type = 'linggan';
            // }
            let oldparams = Object.assign({}, this.params);
            let aparams = Object.assign(oldparams, params);
            aparams.last='';
            this.handleSearch(aparams);
        },
        handleSearch(_params) {
            this.isShowAll = true;
            this.hasMore = true;
            this.scrollLoaded = false;
            this.params.pageNum = 1;
            this.params.last = '';
            this.list = [];
            this.queryList(_params);
        },
        replaceToHtml(_con) {
            return _con ? _con.replace(new RegExp(`\(${this.params.keyword}\)`), '<i>' + this.params.keyword + '</i>') : '';
        },
        async initQueryDefaults() {

            let res = {};
            let that = this;

            let domainUrl = this.$imgdomainurl;
            this.isloading = true;

            //收藏夹
            let tempParams = {
                pageNum: 1,
                pageSize: 12,
                keyword: this.params.keyword,
                type: '',
                isAsc:'desc',
                orderByColumn:'fans',
                showType: '人气最多'
            };
            tempParams.pageSize = 1;
            tempParams.type = 'explorer';
            res = await api.globalSearchList(tempParams);

            if (res.data.length > 0) {
                let item=res.data[0];
                
                item.vtitle = this.replaceToHtml(item.title);
                if(item.collectList){
                    item.collectList.map(f=>{
                        let _vtime = null;
                        if (f.updateTime) {
                            _vtime = f.updateTime;
                        } else if (f.createTime) {
                            _vtime = f.createTime;
                        } else if (f.create_time) {
                            _vtime = f.create_time.replace('T', ' ');
                        }
                        _vtime = Math.abs(new Date(_vtime).getTime());
                        let srcsets = [];
                        let pref=item.type==1?'article-'+f.article.id:f.imageId;
                        srcsets.push(domainUrl +pref + '-' + _vtime + '@1x432.webp 1x');
                        srcsets.push(domainUrl +pref + '-' + _vtime + '@2x432.webp 2x');
                        srcsets.push(domainUrl +pref + '-' + _vtime + '@3x432.webp 3x');
                        f.srcsets = srcsets.join(',')
                        f.lazy = {
                            src: domainUrl +pref + '-' + _vtime + '@1x432.webp',
                            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                        }
                    })
                }

                this.firstCollect =item;
                // this.firstCollect.htitle = this.firstCollect.title.replace(new RegExp(`\(${that.params.keyword}\)`), '<i>' + that.params.keyword + '</i>');
            } else {
                this.firstCollect = {};
            }

            //游戏
            tempParams.pageSize = 3;
            tempParams.type = 'linggan';
            tempParams.rank = '';
            tempParams.imageColor = '';
            tempParams.orderByColumn='see';
            res = await api.globalSearchList(tempParams);
            res.data.map(item => {
                item.vtitle = this.replaceToHtml(item.title);
                
                let _vtime = null;
                if (item.updateTime) {
                    _vtime = item.updateTime;
                } else if (item.createTime) {
                    _vtime = item.createTime;
                } else if (item.create_time) {
                    _vtime = item.create_time.replace('T', ' ');
                }
                _vtime = Math.abs(new Date(_vtime).getTime());
                let srcsets = [];
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@1x432.webp 1x');
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@2x432.webp 2x');
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@3x432.webp 3x');
                item.srcsets = srcsets.join(',')
                item.lazy = {
                    src: domainUrl + 'article-' + item.id + '-' + _vtime + '@1x432.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
            })
            this.firstGames = res.data;

            //作品
            tempParams.pageSize = 1;
            tempParams.type = 'discover';
            res = await api.globalSearchList(tempParams);
            if (res.data.length > 0) {
                let item=res.data[0];
                item.vtitle = this.replaceToHtml(item.title);

                let _vtime = null;
                if (item.updateTime) {
                    _vtime = item.updateTime;
                } else if (item.createTime) {
                    _vtime = item.createTime;
                } else if (item.create_time) {
                    _vtime = item.create_time.replace('T', ' ');
                }
                _vtime = Math.abs(new Date(_vtime).getTime());
                let srcsets = [];
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@1x432.webp 1x');
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@2x432.webp 2x');
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@3x432.webp 3x');
                item.srcsets = srcsets.join(',')
                item.lazy = {
                    src: domainUrl + 'article-' + item.id + '-' + _vtime + '@1x432.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }

                this.firstWork =item;
                // this.firstWork.htitle = this.firstWork.title.replace(new RegExp(`\(${that.params.keyword}\)`), '<i>' + that.params.keyword + '</i>');
            } else {
                this.firstWork = {};
            }

            //文章
            tempParams.pageSize = 1;
            tempParams.type = 'article';
            res = await api.globalSearchList(tempParams);
            if (res.data.length > 0) {
                let item=res.data[0];
                item.vtitle = this.replaceToHtml(item.title);

                let _vtime = null;
                if (item.updateTime) {
                    _vtime = item.updateTime;
                } else if (item.createTime) {
                    _vtime = item.createTime;
                } else if (item.create_time) {
                    _vtime = item.create_time.replace('T', ' ');
                }
                _vtime = Math.abs(new Date(_vtime).getTime());
                let srcsets = [];
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@1x432.webp 1x');
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@2x432.webp 2x');
                srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@3x432.webp 3x');
                item.srcsets = srcsets.join(',')
                item.lazy = {
                    src: domainUrl + 'article-' + item.id + '-' + _vtime + '@1x432.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }

                this.firstArticle =item;
                // this.firstWork.htitle = this.firstWork.title.replace(new RegExp(`\(${that.params.keyword}\)`), '<i>' + that.params.keyword + '</i>');
            } else {
                this.firstArticle = {};
            }

            //短视频
            // tempParams.pageSize = 1;
            // tempParams.type = 'sortVideo';
            // res = await api.globalSearchList(tempParams);
            // if (res.data.length > 0) {
            //     this.firstVideo = res.data[0];
            //     // this.firstVideo.htitle = this.firstVideo.title.replace(new RegExp(`\(${that.params.keyword}\)`), '<i>' + that.params.keyword + '</i>');
            // }

            //截图
            // tempParams.pageSize = 18;
            // tempParams.title = tempParams.keyword;
            // delete tempParams.keyword;
            // res = await api.searchImgs(tempParams);
            // loading.close();
            this.isloading = false;
            let isGudie = localStorage.getItem('IS-GUIDE');

            this.showGudie = isGudie || !this.firstCollect.id ? false : true;
        },
        onInfoClose() {
            window.history.pushState({}, 0, this.curFullPath);
            document.body.style.overflow = 'inherit';
            if (this.infoType == 'game') {
                this.showGameInfo = false;
            } else if (this.infoType == 'work') {
                this.showWorkInfo = false;
            } else if (this.infoType == 'article') {
                this.showArticleInfo = false;
            }
        },
        pushHistory() {
            this.$parent.$refs['gHeader'].globalSearchKeyType=this.homeTypeEnum[this.params.type];
            window.history.pushState({}, 0, '/searchs?k=' + this.params.keyword + '&t=' + this.homeTypeEnum[this.params.type])
        },
        showInfo(_type, _item, _idx) {
            this.currentIdx = _idx;
            this.infoType = _type;
            this.currentId = _item.id;
            if (_type == 'game') {
                window.history.pushState({}, 0, '/game/' + _item.id);
                this.showGameInfo = true;
            } else if (_type == 'work') {
                window.history.pushState({}, 0, '/work/' + _item.id);
                this.showWorkInfo = true;
            } else if (_type == 'article') {
                window.history.pushState({}, 0, '/article/' + _item.id);
                this.showArticleInfo = true;
            }

            document.body.style.overflow = 'hidden';
        },
        showByType(_type) {
            this.params.type = _type;
            this.isShowAll = true;
            this.hasMore = true;
            this.scrollLoaded = false;
            this.params.pageNum = 1;
            this.list = [];
            this.pushHistory();
            this.queryList();
        },
        chooseByType(_type) {
            this.initColorPicker();
            this.list = [];
            this.params.last = '';
            this.params.type = _type;
            this.isShowAll = _type != '' ? true : false;
            this.hasMore = true;
            this.scrollLoaded = false;
            this.params.pageNum = 1;
            this.pushHistory();
            if (!_type) {
                this.initQueryDefaults();
                this.queryList();
            } else {
                this.queryList();
            }
        },
        handleIknow() {
            this.showGudie = false;
            localStorage.setItem('IS-GUIDE', false)
        },
        handleLoadingMore() {
            this.params.pageNum++
            this.queryList()
        },
        calculateTilt(corners){
            const{x:x1,y:y1}=corners[0];//左上
            const{x:x2,y:y2}=corners[1];// 右上
            // 计算 dy 和 dx
            const dy=y2-y1;
            const dx=x2-x1;
            //计算倾角(弧度->角度)
            const angle =Math.atan2(dy,dx)*(180 /Math.PI);
            // 返回角度
            return angle;
        },
        async queryList(_params) {
            let that = this;

            let result = {};
            let _aparams = Object.assign({}, this.params);
            if (_params) {
                _aparams = Object.assign(_aparams, _params);
            }
            this.isloading = true;
            // const loading = this.$loading({
            //     lock: true,
            //     text: '努力加载中...',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });

            if (_aparams.type == 'images' || _aparams.type == '') {
                _aparams.title = _aparams.keyword;
                delete _aparams.keyword;
                // _aparams.rank = '全部游戏';
                _aparams.orderByColumn = 'createTime';
                _aparams.isAsc = 'DESC';
                if(_aparams.pageNum==1){
                    // this.list=this.$bhelper.vlist;
                }
                result = await api.searchImgs(_aparams);
                // let datas=result.data;
                let datas = result.data.images.list;
                datas.forEach(item => {
                    item.show=false;item.showOther=false;
                    that.$bhelper.convertImgItem(item,that);
                })
                this.searchTotal=result.data.images.total;
                if(_aparams.pageNum==1)
                    this.list=[];
                if (datas.length > 0)
                    that.params.last = datas[datas.length - 1].id;
                result.data = datas;
            }
            else {
                if(_aparams.orderByColumn=='see'&&_aparams.type=='explorer'){
                    _aparams.orderByColumn='fans';
                    _aparams.rank='';
                }
                result = await api.globalSearchList(_aparams);
                this.searchTotal=result.total;

                let domainUrl = that.$imgdomainurl;

                if(_aparams.type=='explorer'){
                    result.data.map(item => {
                        item.vtitle = that.replaceToHtml(item.title);
                        if(item.collectList)
                        {
                            item.collectList.map(f=>{
                                let _vtime = null;
                                if (f.updateTime) {
                                    _vtime = f.updateTime;
                                } else if (f.createTime) {
                                    _vtime = f.createTime;
                                } else if (f.create_time) {
                                    _vtime = f.create_time.replace('T', ' ');
                                }
                                _vtime = Math.abs(new Date(_vtime).getTime());
                                let srcsets = [];
                                let pref=item.type==1?'article-'+f.article.id:f.imageId;
                                srcsets.push(domainUrl +pref + '-' + _vtime + '@1x432.webp 1x');
                                srcsets.push(domainUrl +pref + '-' + _vtime + '@2x432.webp 2x');
                                srcsets.push(domainUrl +pref + '-' + _vtime + '@3x432.webp 3x');
                                f.srcsets = srcsets.join(',')
                                f.lazy = {
                                    src: domainUrl +pref + '-' + _vtime + '@1x432.webp',
                                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                                }
                            })
                        }
                    })
                }
                else{
                    result.data.map(item => {
                        item.vtitle = that.replaceToHtml(item.title);
                        let _vtime = null;
                        if (item.updateTime) {
                            _vtime = item.updateTime;
                        } else if (item.createTime) {
                            _vtime = item.createTime;
                        } else if (item.create_time) {
                            _vtime = item.create_time.replace('T', ' ');
                        }
                        _vtime = Math.abs(new Date(_vtime).getTime());
                        let srcsets = [];
                        srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@1x800.webp 1x');
                        srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@2x800.webp 2x');
                        srcsets.push(domainUrl + 'article-' + item.id + '-' + _vtime + '@3x800.webp 3x');
                        item.srcsets = srcsets.join(',')
                        item.lazy = {
                            src: domainUrl + 'article-' + item.id + '-' + _vtime + '@1x800.webp',
                            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                        }
                    })
                }
            }
            
            let old = that.list;

            that.list = [...old, ...result.data];

            // that.total = result.total

            // let totalPage = result.total % that.params.pageSize == 0 ? result.total / that.params.pageSize : parseInt(result.total / that.params.pageSize) + 1
            if ((result.data.length == 0 || result.data.length < that.params.pageSize) || result.data.length < that.params.pageSize) {
                that.hasMore = false
            } else {
                that.hasMore = true
            }
            setTimeout(()=>{
                that.isloading = false;
            },300)
            setTimeout(()=>{
                that.scrollLoaded = true;
            },1000)
        },
        docScroll(e) {
            this.scrollPosition=e.currentTarget.scrollY;

            let that = this;
            let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight

            let scrollTop=this.isShowAll==false||this.params.type=='images'?1000:200;
            
            if (that.scrollLoaded == false) return;
            if (jHeight <= scrollTop && that.hasMore) {
                if (!localStorage.getItem('token')) {
                    that.$parent.noLoginIsTak = false;
                    that.$parent.showLoginView = true;
                    that.isloading = false;
                    window.removeEventListener('scroll', that.docScroll);
                    return;
                }
                that.scrollLoaded = false
                that.handleLoadingMore()
            }
        },
        initQuery(newd){
            this.$parent.$refs.gHeader.globalSearchKeyType=this.$route.query.t;
            this.params.keyword = newd.query.k||'';
            this.params.type = this.searchTypeEnum[newd.query.t];
            if (newd.query.t == '') {
                this.isShowAll = false;
            } else {
                this.isShowAll = true;
            }
            if(!newd.query.t){
                this.initQueryDefaults();
            }

            this.topCates.map(item=>{
                item.selected=false;
                if(item.title==newd.query.k){
                    item.selected=true;
                }
            })
            this.params.last = '';
            this.hasMore = true;
            this.scrollLoaded = false;
            this.params.pageNum = 1;
            this.list = [];
            this.queryList();
        },
        initColorPicker(){
            let that=this;
            var copalette = [["#111111", "#FFFFFF", "#9E9E9E", "#A48057", "#FC85B3", "#FF2727", "#FFA34B", "#FFD534", "#47C595", "#51C4C4", "#2B76E7", "#6D50ED"]];
            setTimeout(()=>{
                if($("#colorfilter").length>0&&$('.sp-container').length==0){
                    that.$nextTick(()=>{
                        that.isInitColorPicker=true;
                        $("#colorfilter").spectrum({
                            showPalette: true,
                            maxSelectionSize: 0,
                            showSelectionPalette: false,
                            palette: copalette,
                            showInput: true,
                            preferredFormat: "hex6",
                            clickoutFiresChange: false,
                            cancelText: '清空',
                            chooseText: "确定"
                        }).on('change.spectrum', function (e, color) {
                            debugger
                            that.params.imageColor = $('.default-view-color span').attr('title');
                        }).on('clear.spectrum', function (e, color) {
                            that.params.imageColor = '';
                        })
                    })
                }
            },500)
        }
    },
    watch: {
        '$route': function (newd) {
            if (newd.name != 'searchs') return;
            if (this.params.keyword == newd.query.k && this.params.type == newd.query.t) return;

            this.initQuery(newd)
        },
        'params.rank': {
            handler(newv, oldv) {
                this.handleSearch();
            }
        },
        'params.imageColor': {
            handler(newv, oldv) {
                this.handleSearch();
            }
        },
        'params.orderByColumn': {
            handler(newv, oldv) {
                this.handleSearch();
            }
        },
        'params.rank': {
            handler(newv, oldv) {
                this.handleSearch();
            }
        }
    },
    async mounted() {
        $('#app').removeClass('is-game').removeClass('is-scroll');
        let that = this;

        let res = await api.getCategoryFilter({ type: 'discover' });
        this.workRanks = res.data.tags;
        this.curFullPath = this.$route.fullPath;

        this.params.keyword = this.$route.query.k||'';
        this.params.type = this.searchTypeEnum[this.$route.query.t];

        let _allCateTypes = JSON.parse(decodeURIComponent(localStorage.getItem('OBJ-CATE-ALL-TYPES')));

        let _cdatas = [];
        _cdatas.push({ name: '风格', items: _allCateTypes.styles, queryfield: 'style',checked:true})
        _cdatas.push({ name: '类型', items: _allCateTypes.categorys, queryfield: 'categoryIds' })
        _cdatas.push({ name: '主题', items: _allCateTypes.themes, queryfield: 'tags' })
        _cdatas.push({ name: '功能', items: _allCateTypes.funs, queryfield: 'paramImagesDescFunc' })
        _cdatas.push({ name: '材质图案', items: _allCateTypes.materials, queryfield: 'paramImagesDescMaterial' })
        _cdatas.push({ name: '平台', items: _allCateTypes.devices, queryfield: 'device' })
        _cdatas.push({ name: '版式', items: _allCateTypes.orientations, queryfield: 'orientation' })
        _cdatas.push({ name: '上线年份', items: _allCateTypes.eras, queryfield: 'era' })
        this.cateObj = _cdatas;

        res=await api.hotWords({showAll:true,pageNum:1,pageSize:30});
        this.topCates=res.data;
        
        this.initQuery(this.$route)

        this.$nextTick(() => {
            that.$refs['cateSwp'].init();

            that.initColorPicker();
        })
    }
}

</script>

<style lang="less">

@import url('../assets/style/spectrum.css');

.nav-sticky {
    position: relative;
    top:0px;
    z-index: 11;
    // background: #111;
    padding-bottom:21px;
}

.scrollMenuBox {
    max-height: 382px;
    border-radius: 0px;
    height: 382px;
}

.search-page {
    .typename-box {
                // padding-top: 6px;
                padding-left: 15px;
                margin-bottom: 10px;

                .type-name {
                    line-height: 20px;
                    font-size: 10px;
                    padding: 0px 4px;
                    border-radius: 3px;
                    display: inline-block;
                    position: relative;
                    overflow: hidden;

                    &:before {
                        content: '';
                        width: 100%;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        height: 100%;
                    }

                    &.ftp_1 {
                        color: #725959;

                        &:before {
                            background: rgba(228, 36, 82, .14);
                        }
                    }

                    &.ftp_0 {
                        color: #726659;

                        &:before {
                            background: rgba(#E49424, .14);
                        }
                    }

                    &.ftp_2 {
                        color: #4A5A4B;

                        &:before {
                            opacity: 0.14;
                            background: rgba(54, 228, 36, 0.54);
                        }
                    }

                    i {
                        font-style: normal;
                        position: relative;
                        font-size: 10px;
                        width: 100%;
                        text-align: center;
                    }
                }
            }

    .gp-filter {
        display: inline-block !important;
        width: 100%;
        margin-bottom:0px !important;
        .gp-img-layout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 44px;
        }

        .mobile {
            display: none;
        }

        .seach-bx {
            .q-f-item-wrap {
                display: flex;
                align-items: center;
                // background: #1C1C1E;
                background: url('../assets/pro/header/search_icon.svg') no-repeat !important;
                background-position: 14px center !important;
                background-size: 16px 16px !important;
                // padding-left: 36px;
                border-radius: 8px;
                line-height: 30px;
                grid-gap: 9px;

                // width: 100%;
                // margin-left: 20px;
                // margin-right: 10px;
                input {
                    // background: #1C1C1E;
                    height: 44px;
                    padding-left: 0px;
                    // line-height: 40px;
                    // border-radius: 8px;
                    // border: none;
                    // color: #fff;
                    // width: 100%;
                    // font-size: 14px;
                }
            }
            overflow-y:hidden;
        }
    }

    .video-wrap {
        display: flex;
        flex-wrap: wrap;

        .data-box {
            margin-right: 20px;
            background: #181818;
            border-radius: 16px;
            position: relative;
            width: 216px;
            height: 290px;
            margin-bottom: 20px;
            overflow: hidden;

            &:nth-child(7n) {
                margin-right: 0px;
            }

            .t-imgs {
                width: 216px;
                height: 228px;
                border-radius: 16px;
                overflow: hidden;
                margin-bottom: 10px;
                position: relative;

                .play-icon {
                    background: url('../assets/pro/home_v_play.svg') no-repeat;
                    background-position: center center;
                    background-size: 80px 80px;
                    display: inline-block;
                    width: 80px;
                    height: 80px;
                    position: absolute;
                    left: calc((100% - 80px) / 2);
                    top: calc((100% - 80px) / 2);
                }

                >img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .left-icos {
                position: absolute;
                left: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        margin-right: 10px;
                    }
                }
            }

            .right-icos {
                position: absolute;
                right: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        // margin-right:10px;
                    }
                }
            }

            .title-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 500;
                margin-bottom: 10px;
                padding: 0px 12px 0px 15px;

                .title {
                    font-size: 16px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;

                    i {
                        color: #11CCB1;
                        font-style: normal;
                    }
                }

                .num {
                    color: #969696;
                    font-size: 12px;

                    &.znum {
                        font-size: 12px;
                        background: url('../assets/pro/dianzanicon.svg') no-repeat;
                        padding-left: 26px;
                    }
                }
            }

            .u-row {
                display: flex;
                align-items: center;
                padding: 0px 12px 16px 15px;

                .img-box {
                    width: 20px;
                    height: 20px;
                    border-radius: 20px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .name {
                    font-size: 12px;
                    color: #969696;
                    margin-left: 8px;
                }
            }
        }

        &.vd-list-area {
            grid-gap: 20px;

            .data-box {
                width: calc((100% - 80px) / 5);
                height: 175px;
                margin-bottom: 0px;
                margin-right: 0px;

                .hid-el {
                    // display: none;
                    opacity: 0;
                }

                &:hover {
                    border: 2px solid #11CCB1;
                    cursor: pointer;

                    a {
                        >img {
                            transform: scale(1.08);
                        }
                    }

                    .hid-el {
                        // display: inline-block;
                        opacity: 1;

                        transition: 0.1s all linear;
                    }
                }

                .play-icon {
                    background: url('../assets/pro/home_v_play.svg') no-repeat;
                    background-position: center center;
                    background-size: 80px 80px;
                    display: inline-block;
                    width: 80px;
                    height: 80px;
                    position: absolute;
                    left: calc((100% - 80px) / 2);
                    top: calc((100% - 80px) / 2);
                    z-index: 1;
                }

                .con-mask {
                    height: 129px;
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                    right: 0px;
                    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
                }

                .main-box {
                    display: inline-block;
                    width: 100%;
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .title {
                    background: url('../assets/pro/icon_video_transfer.svg') no-repeat;
                    background-position: left center;
                    background-size: 16px 16px;
                    position: absolute;
                    bottom: 11px;
                    padding-left: 20px;
                    left: 14px;
                    font-size: 14px;
                    font-weight: 500;

                    i {
                        color: #11CCB1;
                        font-style: normal;
                    }
                }
            }
        }
    }

    .bdl-data-item:hover {

        .t-imgs,
        .img-flex-box .main-img {
            img {
                transform: scale(1.08);
            }
        }
    }

    .jitu-wrap {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 20px;

        .data-box {
            margin-right: 0px !important;
            background: #181818;
            border-radius: 16px;
            position: relative;
            width: calc((100% - 100px) / 6);
            // width: 216px;
            // height: 290px;
            // margin-bottom: 20px;
            overflow: hidden;
            border: 2px solid transparent;
            max-height:292px;
            .t-imgs {
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                position: relative;

                .f-img {
                    // height: 151px;
                    min-width: 160px;
                    background: #242327;
                    margin-right: 6px;
                    border-radius: 16px;
                    overflow: hidden;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .n-imgs {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    grid-gap: 6px;

                    span {
                        width: 100%;
                        height: 81px;
                        background: #242327;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                    }
                }
            }

            .title-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 500;
                margin-bottom: 10px;
                padding:0px 12px 0px 15px;

                .title {
                    font-size: 16px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 65%;

                    i {
                        color: #11CCB1;
                        font-style: normal;
                    }
                }

                .num {
                    color: #969696;
                    font-size: 12px;

                    &.znum {
                        font-size: 12px;
                        background: url('../assets/pro/dianzanicon.svg') no-repeat;
                        padding-left: 26px;
                    }
                }
            }

            .u-row {
                display: flex;
                align-items: center;
                padding: 0px 12px 16px 15px;
                color: #fff;

                //     width:20px;height:20px;
                //     border-radius:20px;
                //     overflow: hidden;
                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 20px;
                    object-fit: cover;
                    margin-right: 8px;
                }

                // }
                // .name{
                //     font-size:12px;
                //     color:#969696;
                // }
                &:hover {
                    color: #11CCB1;
                }
            }
        }

        &.clt-fld-area {
            .data-box {
                // width: 256px;
                // height: 332px;
                // border-color: #181818;
                // transition: .1s all linear;

                &:hover {
                    border-color:#11CCB1;
                }

                .t-imgs {
                    .f-img {
                        height: 168px;
                    }

                    .n-imgs {
                        span {
                            // width:calc(100% / 3);
                            // height: 85px;

                            &:first-child {
                                // width: 84px;
                                // height: 85px;
                            }
                        }
                    }
                }

                &:nth-child(6n) {
                    // margin-right: 0px;
                }

                &:nth-child(7n) {
                    // margin-right: 20px;
                }
            }
        }
    }

    .guide-mask {
        position: fixed;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        // background: rgba(0, 0, 0, 0.6);
        background: rgba(0, 0, 0, 0.7);
        // backdrop-filter: saturate(180%) blur(16px);
        z-index: 112;
    }

    .first-guide {
        background: url('../assets/pro/first_guide.png') no-repeat;
        width: 411.87px;
        height: 277.51px;
        background-size: cover;
        position: absolute;
        top: 45px;
        left: 30px;
        z-index: 113;

        .i-know-btn {
            background-color: #000;
            color: #11CCB1;
            border: 2px solid #11CCB1;
            line-height: 60px;
            width: 185px;
            text-align: center;
            font-size: 24px;
            border-radius: 60px;
            font-weight: 500;
            position: absolute;
            user-select: none;
            bottom: -100px;
            left: calc((100% - 185px) / 2);
        }
    }

    .select-d-fix {
        position: fixed;
        bottom: 40px;
        left: 0px;
        right: 0px;
        z-index: 111;
        text-align: center;

        .box {
            background: #23232A;
            height: 65px;
            border-radius: 16px;
            padding: 0px 14px;
            display: inline-block;
            margin: 0 auto;
            color: #fff;
            display: flex;
            box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
            align-items: center;
            width: max-content;
            font-size: 14px;
            line-height: 38px;
            font-size: 14px;
            user-select: none;

            .num {
                background: #37363E;
                border-radius: 10px;
                padding: 0px 13px;

                i {
                    color: #11CCB1;
                    margin: 0px 4px;
                    font-style: normal;
                }
            }

            .select-all {
                font-weight: 500;
                margin-right: 59px;
                margin-left: 12px;
            }

            .fav-to {
                background: url('../assets/pro/s_fav_to.svg') no-repeat;
                color: #fff;
                width: 123px;
                background-color: #F8004E;
                border-radius: 10px;
                background-position: 10% center;
                font-weight: 500;
                padding-left: 10px;
            }

            .download-to {
                background: url('../assets/pro/s_down_to.svg') no-repeat;
                color: #fff;
                width: 123px;
                border-radius: 10px;
                background-position: 10% center;
                background-color: #F8004E;
                margin-left: 10px;
                font-weight: 500;
                padding-left: 10px;
            }
        }
    }

    .list-wrap {
        display: flex;
        align-items: flex-start;

        .filter-by {
            top: 254px;
            .cates {
                max-height:calc(100vh - 355px);
                min-height:calc(100vh - 355px);
            }
        }

        &.fill {
            .list-box {
                .bdl-data-item {
                    &:nth-child(7n) {
                        // margin-right: 0px;
                    }
                }
            }
        }

        &.wk-list-area {
            .list-box {
                grid-gap: 20px;

                .bdl-data-item {
                    // width: 312px;
                    width: calc((100% - 80px) / 5);
                    // height: 290px;
                    border-radius: 16px;
                    overflow: hidden;
                    margin-right: 0px;
                    margin-bottom: 0px;
                    position: relative;
                    // transition: .1s all linear;
                    border: 2px solid transparent;

                    .img-flex-box {
                        display: flex;
                        align-items: center;
                        position: relative;
                        // height: 210px;

                        .lt-img {
                            width: 204px;
                            height: 210px;
                            margin-right: 6px;
                            border-radius: 16px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .rt-img {
                            .next-img {
                                width: 102px;
                                height: 102px;
                                margin-bottom: 6px;
                                border-radius: 16px;
                                overflow: hidden;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }

                            .last-img {
                                width: 102px;
                                height: 102px;
                                border-radius: 16px;
                                overflow: hidden;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                        }

                        .main-img {
                            // height: 210px;
                            width: 100%;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }

                            .ops {
                                position: absolute;
                                top: 10px;
                                right: 10px;
                                display: none;
                                transition: .2s all linear;

                                a {
                                    border-radius: 12px;
                                    background: #FFFFFF;
                                    width: 40px;
                                    height: 40px;
                                    transition: .2s all linear;

                                    &:hover {
                                        // opacity:.9;
                                        background-color: #e1e1e1;
                                    }
                                }

                                .i-del {
                                    background-image: url('../assets/pro/i_del.png');
                                    background-size: 22px 22px;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    margin-right: 10px;
                                }

                                .i-edit {
                                    background-image: url('../assets/pro/i_edit.png');
                                    background-size: 22px 22px;
                                    background-repeat: no-repeat;
                                    background-position: center;
                                }
                            }
                        }

                        .author {
                            position: absolute;
                            bottom: 10px;
                            left: 9px;
                            background: rgba(255, 255, 255, 0.9);
                            border-radius: 12px;
                            padding: 10px 13px;
                            transition: 0.1s all linear;
                            width: 164px;
                            cursor: pointer;

                            &:hover {
                                background: rgba(255, 255, 255, 1);
                            }

                            .ar-tit {
                                font-size: 14px;
                                font-weight: 500;
                                color: #383737;
                                line-height: 20px;
                                margin-bottom: 5px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                background: url('../assets/pro/take_tit_icon.svg') no-repeat;
                                background-position: left center;
                                padding-left: 22px;
                            }

                            .u-box {
                                display: flex;
                                padding-left: 20px;

                                .name {
                                    font-size: 14px;
                                    color: #969696;
                                    font-weight: 500;
                                }

                                .avatar {
                                    width: 20px;
                                    height: 20px;
                                    border-radius: 20px;
                                    margin-right: 7px;
                                }
                            }
                        }

                        .at-btn {
                            color: #fff;
                            font-size: 14px;
                            background-color: #11CCB1;
                            border-radius: 12px;
                            line-height: 44px;
                            background-image: url('../assets/pro/un_follow_ico.svg');
                            background-repeat: no-repeat;
                            background-position: 11px center;
                            // width:82px;
                            padding-left: 35px;
                            padding-right: 19px;
                            text-align: center;
                            position: absolute;
                            left: 10px;
                            top: 10px;
                        }

                        .ated-btn {
                            color: #383737;
                            font-size: 14px;
                            background-color: #fff;
                            border-radius: 12px;
                            line-height: 44px;
                            background-image: url('../assets/pro/cancel_follow_ico.svg');
                            background-repeat: no-repeat;
                            background-position: 11px center;
                            // width:82px;
                            padding-left: 35px;
                            padding-right: 19px;
                            text-align: center;
                            position: absolute;
                            left: 10px;
                            top: 10px;
                        }

                        .edit-btn {
                            color: #383737;
                            font-size: 14px;
                            background-color: #fff;
                            border-radius: 12px;
                            line-height: 44px;
                            width: 40px;
                            height: 40px;
                            text-align: center;
                            position: absolute;
                            right: 10px;
                            top: 10px;
                            background-image: url('../assets/pro/edit_ico.svg');
                            background-repeat: no-repeat;
                            background-position: center center;
                        }

                        .hid-el {
                            // display: none;
                            transition: .1s all linear;
                            opacity: 0;
                        }

                        &:hover {
                            .hid-el {
                                // display: inline-block;
                                opacity: 1;
                            }
                        }
                    }

                    .bot-desc {
                        font-size: 16px;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 9px;
                        align-items: center;
                        padding-right: 16px;
                        .file-name {
                            color: #fff;
                            font-weight: 500;
                            padding-left: 15px;
                            font-size: 16px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;

                            i {
                                color: #11CCB1;
                                font-style: normal;
                            }
                        }

                        .zan-num {
                            color: #969696;
                            background: url('../assets/pro/dianzanicon.svg') no-repeat;
                            padding-left: 24px;
                            font-size: 12px;
                            background-position: left center;
                        }

                        .type-text {
                            border: 1px solid #4B4B52;
                            border-radius: 2px;
                            color: #848393;
                            font-size: 12px;
                            padding: 0px 5px;
                            line-height: 18px;
                            white-space: nowrap;
                            margin-left: 30px;
                        }
                    }

                    .bot-author {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding-left: 15px;
                        margin-top: 11px;
                        padding-bottom: 14px;
                        padding-right: 16px;

                        .rt{
                            display: flex;
                            .vnum {
                                font-size: 12px;
                                background: url('../assets/pro/l_vnum.svg') no-repeat;
                                padding-left: 20px;
                                background-position: left center;
                                // color: #fff;
                                line-height: 20px;
                                margin-left:20px;
                                color:#52565A;
                            }
                            .znum {
                                background: url('../assets/pro/icon_like2.svg') no-repeat;
                                background-position: left center;
                                background-size: 20px 20px;
                                padding-left: 22px;
                            }
                        }
                        .u {
                            display: flex;
                            align-items: center;
                            color: #fff;

                            .name {
                                display: flex;
                                align-items: center;
                            }

                            .name-text {
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            .img-box {
                                width: 20px;
                                height: 20px;
                                min-width: 20px;
                                border-radius: 20px;
                                overflow: hidden;
                                margin-right: 6px;
                                display: flex;

                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }

                            &:hover {
                                color: #11CCB1;
                            }
                        }

                        .like-num {
                            background: url('../assets/pro/icon_like2.svg') no-repeat;
                            background-position: left center;
                            background-size: 20px 20px;
                            padding-left: 22px;
                        }
                    }

                    &:hover {
                        border: 2px solid #11CCB1;

                        >img {
                            transform: scale(1.08);
                        }

                        .hid-el {
                            opacity: 1;
                        }
                    }

                    .left-icos {
                        position: absolute;
                        left: 10px;
                        top: 10px;
                        display: flex;
                        align-items: center;

                        img {
                            &:first-child {
                                margin-right: 10px;
                            }
                        }
                    }

                    .right-icos {
                        position: absolute;
                        right: 10px;
                        top: 10px;
                        display: flex;
                        align-items: center;
                        transition: .2s all linear;

                        img {
                            &:first-child {
                                // margin-right:10px;
                            }
                        }
                    }

                    >img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .basic-u-info {
                        position: absolute;
                        bottom: 11px;
                        left: 13px;
                        display: flex;
                        align-items: center;
                        right: 12px;
                        justify-content: space-between;
                        z-index: 1;

                        .user {
                            display: flex;
                            align-items: center;

                            img {
                                height: 26px;
                                width: 26px;
                                border-radius: 26px;
                                object-fit: cover;
                                margin-right: 9px;
                            }

                            .name {
                                color: #fff;
                                font-size: 14px;
                                font-weight: 500;
                            }
                        }

                        .znum {
                            font-size: 12px;
                            background: url('../assets/pro/dianzanicon.svg') no-repeat;
                            padding-left: 26px;
                            color: #fff;
                        }

                        .snum {
                            font-size: 12px;
                            background: url('../assets/pro/yuedu_icon.svg') no-repeat;
                            padding-left: 26px;
                            color: #fff;
                        }
                    }

                    .con-mask {
                        height: 129px;
                        position: absolute;
                        bottom: 0px;
                        left: 0px;
                        right: 0px;
                        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
                    }

                    .hid-el {
                        opacity: 0;
                    }
                }
            }
        }
    }

    .single-row-tit {
        font-size: 26px;
        line-height: 37px;
        margin-bottom: 16px;
    }

    .first-result-row {
        display: flex;
        margin-bottom:20px;

        // border:1px solid red;
        .result-item {
            &.collect {
                // width:370px;
                margin-right: 29px;
                position: relative;

                .data-box {
                    border: 2px solid transparent;
                    transition: .2s all linear;
                    cursor: pointer;
                    max-height:305px;
                    &:hover {
                        border-color:#11CCB1;
                    }
                
                    .ubot{
                        display: flex;
                        padding:0px 12px 16px 15px;
                        justify-content: space-between;
                        .typename-box{
                            margin-bottom:0px;
                            display: flex;
                            align-items:center;
                            .type-name{
                                white-space: nowrap;
                            }
                        }
                    }
                }
            }

            &.game {
                // width:370px;
                margin-right: 29px;
            }

            .b-tit {
                font-size: 26px;
                line-height: 37px;
                margin-bottom: 16px;
            }

            .data-box-wrap {
                display: flex;

                .guide-more {
                    width: 24px;
                    height: 24px;
                    background: url('../assets/pro/guide_more.svg') no-repeat;
                    background-position: center;
                    margin-left: 8px;
                    background-size: cover;
                }
            }

            .data-box {
                width: 228px;
                // border:1px solid red;
                border-radius: 16px;
                background: #181818;
                overflow: hidden;
                margin-right: 8px;

                .t-imgs {
                    margin-bottom: 10px;
                    min-height: 228px;
                    // border:1px solid red;
                    display: flex;
                    grid-gap: 6px;
                    height: 228px;

                    .f-img {
                        // height: 151px;
                        min-width: 150px;
                        background: #242327;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            height: 100%;
                            width: 100%;
                            object-fit: cover;
                        }
                    }

                    .n-imgs {
                        display: flex;
                        flex-wrap: wrap;
                        grid-gap: 6px;
                        flex-direction: column;
                        width: 100%;

                        span {
                            width: 100%;
                            height: 72px;
                            background: #242327;
                            border-radius: 16px;
                            overflow: hidden;

                            img {
                                height: 100%;
                                width: 100%;
                                object-fit: cover;
                            }
                        }
                    }
                }

                .title-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 500;
                    margin-bottom: 10px;
                    padding: 0px 12px 0px 15px;

                    .title {
                        font-size: 16px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #fff;

                        i {
                            color: #11CCB1;
                            font-style: normal;
                        }
                    }

                    .num {
                        color: #969696;
                        font-size: 12px;
                        white-space: nowrap;
                        margin-left: 10px;

                        &.znum {
                            font-size: 12px;
                            background: url('../assets/pro/dianzanicon.svg') no-repeat;
                            padding-left: 26px;
                        }
                    }
                }
                .u-row {
                    display: flex;
                    align-items: center;
                    // padding: 0px 12px 16px 15px;

                    .img-box {
                        width: 20px;
                        height: 20px;
                        border-radius: 20px;
                        overflow: hidden;
                        display: flex;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .name {
                        font-size: 12px;
                        color: #969696;
                        margin-left: 8px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }

            .mu-items-box {
                display: flex;
                grid-gap: 20px;

                .bdl-data-item {
                    background: #181818;
                    border-radius: 16px;
                    position: relative;
                    width: 228px;
                    border: 2px solid transparent;
                    transition: .2s all linear;
                    max-height:305px;
                    overflow: hidden;

                    .hid-el {
                        visibility: hidden;
                    }

                    &:hover {
                        border-color: #11CCB1;

                        .hid-el {
                            visibility: visible;
                        }
                    }

                    .t-imgs {
                        width: 228px;
                        height: 228px;
                        border-radius: 16px;
                        overflow: hidden;
                        margin-bottom: 10px;
                        position: relative;

                        .play-icon {
                            background: url('../assets/pro/home_v_play.svg') no-repeat;
                            background-position: center center;
                            background-size: 80px 80px;
                            display: inline-block;
                            width: 80px;
                            height: 80px;
                            position: absolute;
                            left: calc((100% - 80px) / 2);
                            top: calc((100% - 80px) / 2);
                        }

                        >img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .left-icos {
                        position: absolute;
                        left: 10px;
                        top: 10px;
                        display: flex;
                        align-items: center;

                        img {
                            &:first-child {
                                margin-right: 10px;
                            }
                        }
                    }

                    .right-icos {
                        position: absolute;
                        right: 10px;
                        top: 10px;
                        display: flex;
                        align-items: center;

                        img {
                            &:first-child {
                                // margin-right:10px;
                            }
                        }
                    }


                    .title-row {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-weight: 500;
                        margin-bottom: 10px;
                        padding: 0px 12px 0px 15px;

                        .title {
                            font-size: 16px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 80%;

                            i {
                                color: #11CCB1;
                                font-style: normal;
                            }
                        }

                        .num {
                            color: #969696;
                            font-size: 12px;

                            &.znum {
                                font-size: 12px;
                                background: url('../assets/pro/icon_like2.svg') no-repeat;
                                padding-left: 26px;
                                background-position: left center;
                                color: #969696;
                                line-height: 20px;
                            }
                        }
                    }

                    .u-row {
                        display: flex;
                        align-items: center;
                        padding: 0px 12px 16px 15px;

                        .img-box {
                            width: 20px;
                            height: 20px;
                            border-radius: 20px;
                            overflow: hidden;
                            display: flex;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .name {
                            font-size: 12px;
                            color: #969696;
                            margin-left: 8px;
                        }
                    }
                }
            }
        }
    }

    .list-box {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 20px;
        min-width: calc(100% - 244px);

        .bdl-data-item {
            // margin-right: 20px;
            // background: #181818;
            border-radius: 16px;
            position: relative;
            // width: 216px;
            width: calc((100% - 80px) / 5);
            // height: 290px;
            // margin-bottom: 20px;
            border: 2px solid transparent;

            &:last-child {
                margin-right: 0px;
            }

            .t-imgs {
                // height: 269px;
                border-radius: 16px;
                overflow: hidden;
                margin-bottom: 10px;
                position: relative;

                .play-icon {
                    background: url('../assets/pro/home_v_play.svg') no-repeat;
                    background-position: center center;
                    background-size: 80px 80px;
                    display: inline-block;
                    width: 80px;
                    height: 80px;
                    position: absolute;
                    left: calc((100% - 80px) / 2);
                    top: calc((100% - 80px) / 2);
                }

                >img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .left-icos {
                position: absolute;
                left: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        margin-right: 10px;
                    }
                }
            }

            .right-icos {
                position: absolute;
                right: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        // margin-right:10px;
                    }
                }
            }

            .fav-btn {
                background-color: #11CCB1;
                color: #fff;
                height: 44px;
                line-height: 44px;
                // width:82px;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 14px;
                border-radius: 12px;
                cursor: pointer;
                background-image: url('../assets/pro/un_favicon.svg');
                background-repeat: no-repeat;
                background-position: 11px center;
                padding-left: 35px;
                padding-right: 12px;

                &:hover {
                    background-color: #f34972;
                }
            }

            .faved-btn {
                background-color: #fff;
                color: #000;
                height: 44px;
                line-height: 44px;
                // width:82px;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 14px;
                border-radius: 12px;
                cursor: pointer;
                background-image: url('../assets/pro/faved_icon.svg');
                background-repeat: no-repeat;
                background-position: 11px center;
                padding-left: 35px;
                padding-right: 12px;
                opacity: 0.9;

                &:hover {
                    opacity: 1;
                }
            }

            .title-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 500;
                margin-bottom: 10px;
                padding: 0px 12px 0px 11px;

                .title {
                    font-size: 16px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    i {
                        color: #11CCB1;
                        font-style: normal;
                    }
                }
                .rt{
                    display: flex;
                    .vnum {
                        font-size: 12px;
                        background: url('../assets/pro/l_vnum.svg') no-repeat;
                        padding-left: 20px;
                        background-position: left center;
                        // color: #fff;
                        line-height: 20px;
                        margin-left:20px;
                        color:#52565A;
                    }
                }
                .num {
                    color: #969696;
                    font-size: 12px;

                    &.znum {
                        font-size: 12px;
                        background: url('../assets/pro/icon_like2.svg') no-repeat;
                        padding-left:20px;
                        background-position: left center;
                        color: #969696;
                        line-height: 20px;
                    }

                    &.snum {
                        font-size: 12px;
                        background: url('../assets/pro/yuedu_icon.svg') no-repeat;
                        padding-left: 26px;
                        color: #fff;
                    }
                }
            }

            .u-row {
                display: flex;
                align-items: center;
                // padding:0px 12px 16px 15px;
                margin: 0px 12px 16px 11px;
                // border:1px solid red;
                // .img-box{
                font-size: 12px;
                color: #969696;
                line-height: 17px;

                img {
                    &:first-child{
                        width: 20px;
                        height: 20px;
                        border-radius: 20px;
                        object-fit: cover;
                        margin-right: 8px;
                    }
                }

                // }
                &:hover {
                    color: #11CCB1;
                }
            }


            .hid-el {
                // display: none;
                transition: .1s all linear;
                opacity: 0;
            }

            &:hover {
                border: 2px solid #11CCB1;

                // width:212px;
                // height:286px;
                .hid-el {
                    // display: inline-block;
                    opacity: 1;
                }

                .t-imgs {
                    img {
                        transform: scale(1.08);
                    }
                }

                // .left-icos,.right-icos{
                //     display: none;
                // }
            }
        }
    }

    .cate-page-prev {
        background: url('../assets/pro/right_label_arrow.svg') no-repeat;
        width: 80px;
        height: 46px;
        transform: rotate(180deg);
        z-index: 1;
        left: 0px !important;

        &:after {
            display: none;
        }

        &:hover {
            background: url('../assets/pro/right_label_arrow.svg') no-repeat;
            opacity: .6 !important;
        }
    }

    .cate-page-next {
        background: url('../assets/pro/right_label_arrow.svg') no-repeat;
        width: 80px;
        height: 46px;
        z-index: 1;
        right: 0px;

        &:after {
            display: none;
        }

        &:hover {
            background: url('../assets/pro/right_label_arrow.svg') no-repeat;
            opacity: .6 !important;
        }
    }

    .gp-filter {
        display: flex;
        align-items: center;
        margin: 30px 0px;
        justify-content: space-between;

        .search-by-type {
            font-size: 18px;
            display: flex;
            grid-gap:30px;
            a {
                color: #969696;
                // margin-right: 30px;

                &.active {
                    font-weight: 500;
                    color: #fff;
                    position: relative;

                    &:after {
                        content: '';
                        position: absolute;
                        width: 24px;
                        height: 2px;
                        border-radius: 2px;
                        left: calc((100% - 24px) / 2);
                        bottom: -6px;
                        border-radius: 2px;
                        background: #11CCB1;
                    }
                }

                &:hover {
                    font-weight: 500;
                    color: #fff;
                }
            }
        }
        .gp-img-layout-r{
            display: flex;
            width:100%;
            max-width:calc(100% - 384px);
            height:44px;
        }

        >* {
            white-space: nowrap;
        }

        .label-filter {
            margin-left: 20px;
            display: flex;
            align-items: center;

            .tit {
                font-size: 14px;
                color: #969696;
            }

            >span {
                display: inline-block;
            }

            .plat-items {
                display: flex;
                align-items: center;

                >span>span>span {
                    width: 30px;
                    height: 30px;
                    margin-left: 10px;
                    display: inline-block;
                    cursor: pointer;

                    &.windows {
                        background: url('../assets/pro/pc_normal_icon.svg') no-repeat;
                        background-size: cover;
                    }

                    &.xbox {
                        background: url('../assets/pro/xbox_normal_icon.svg') no-repeat;
                        background-size: cover;
                    }

                    &.switch {
                        background: url('../assets/pro/zj_normal_icon.svg') no-repeat;
                        background-size: cover;
                    }

                    &.apple {
                        background: url('../assets/pro/mobile_normal_icon.svg') no-repeat;
                        background-size: cover;
                    }

                    &.h-screen {
                        background: url('../assets/pro/hb_normal_icon.svg') no-repeat;
                        background-size: cover;
                    }

                    &.s-screen {
                        background: url('../assets/pro/sp_normal_icon.svg') no-repeat;
                        background-size: cover;
                    }
                }
            }

            .lbs-slider {
                min-width: 200px;

                .lbs-slider-control {
                    padding-left: 20px;

                    .el-slider__bar {
                        background: #38383B;
                    }

                    .el-slider__button {
                        border-color: #969696;
                        background: #969696;
                    }

                    .el-slider__runway {
                        background: #38383B;

                        .el-slider__button-wrapper {
                            z-index: 100;
                        }
                    }
                }
            }
        }

        .bs-g-flabel {
            &:hover {
                .games-filter {
                    display: inline-block;
                }
            }

            .cur {
                cursor: pointer;
            }

            .games-filter {
                position: absolute;
                top: 44px;
                right: 0px;
                width: 423px;
                padding-top: 20px;
                display: none;
                z-index: 1;
                &.img-rto-w{
                    width: 244px;
                }

                .games-filter-wrap {
                    padding: 30px;
                    background: #23232A;
                    border-radius: 30px;
                    // padding-bottom: 16px;

                    .filter-search {
                        margin-bottom: 20px;
                        position: relative;

                        input {
                            background: #171719;
                            height: 40px;
                            line-height: 40px;
                            border-radius: 8px;
                            border: none;
                            padding-left: 36px;
                            color: #fff;
                            width: 100%;
                            font-size: 14px;
                            background-image: url('../assets/pro/header/search_icon.svg');
                            background-repeat: no-repeat;
                            background-position: 14px center;
                            background-size: 16px 16px;
                        }

                        .clear-key-btn {
                            width: 20px;
                            height: 20px;
                            background-image: url('../assets/pro/input_clear.svg');
                            display: inline-block;
                            position: absolute;
                            right: 10px;
                            top: 12px;
                            cursor: pointer;
                        }
                    }

                    .filter-g-tab {
                        display: flex;
                        align-items: center;
                        font-size: 16px;
                        // color: #969696;
                        color: #fff;
                        line-height: 22px;
                        // margin-bottom: 14px;

                        span {
                            margin-right: 40px;
                            cursor: pointer;
                            user-select: none;
                        }

                        .active {
                            color: #fff;
                            font-weight: 500;
                            position: relative;

                            &:after {
                                content: '';
                                position: absolute;
                                bottom: -5px;
                                left: calc((100% - 24px) / 2);
                                height: 2px;
                                border-radius: 2px;
                                background: #fff;
                                display: inline-block;
                                width: 24px;
                            }
                        }
                    }

                    .gft-data-box {
                        .data-ul {
                            display: flex;
                            flex-wrap: wrap;

                            li {
                                text-align: center;
                                line-height: 38px;
                                border-radius: 30px;
                                overflow: hidden;
                                user-select: none;

                                &:nth-child(4n) {
                                    margin-right: 0px;
                                }

                                &:last-child {
                                    margin-right: 0px;
                                }

                                a {
                                    display: inline-block;
                                    width: 100%;
                                    background: #37363E;
                                    color: #fff;

                                    &.active {
                                        background: #11CCB1;
                                    }
                                }
                            }

                            &.colors {
                                li {
                                    width: 30px;
                                    height: 30px;
                                    border-radius: 30px;
                                    // margin-bottom: 14px;

                                    a {
                                        display: inline-block;
                                        height: 100%;
                                    }

                                    &:nth-child(4n) {
                                        // margin-right: 16px;
                                    }

                                    &:nth-child(8n) {
                                        // margin-right: 0px;
                                    }
                                }
                            }
                        }

                        &.mr16 {
                            li {
                                // margin-right: 16px;
                                width: 110px;
                            }
                        }

                        &.mr15 {
                            li {
                                // margin-right: 15px;
                                width: 79px;
                            }
                        }
                    }
                }

                .bot-btns {
                    text-align: right;
                    margin-top: 18px;
                    border-top: 1px solid #272728;
                    padding-top: 18px;

                    a {
                        line-height: 40px;
                        border-radius: 8px;
                        font-weight: 500;
                        display: inline-block;
                        width: 100px;
                        user-select: none;
                        text-align: center;
                    }

                    .cancel {
                        background: #37363E;
                        color: #fff;
                        margin-right: 15px;
                    }

                    .confirm {
                        background: #11CCB1;
                        color: #fff;
                    }
                }
            }
        }
    }

    .img-datas {
        margin-top:0px;

        // padding-bottom: 100px;
        .b-tit {
            font-size: 26px;
            line-height: 37px;
            display:flex !important;
            justify-content:flex-start;
            margin-bottom: 16px !important;;
        }

        .img-list {
            width: 100%;
            // overflow-x:hidden;
        }
    }

}

.q-f-item {
    background: #3D3C40;
    height: 30px;
    border-radius: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 14px;
    // margin-left:4px;
    .ct {
        padding: 0px 10px;
        border-radius: 15px;
        background: #343239;
        line-height: 30px;
        margin-right: 10px;
    }

    .it-clr {
        width: 30px;
        height: 30px;
        background: url('../assets/pro/search/ct_clr.svg') no-repeat;
        background-size: 18px 18px;
        background-position: center;
        cursor: pointer;
        margin-left: 5px;

        &:hover {
            opacity: .8;
        }
    }
}
</style>